---
image: /generated/articles-docs-loop.png
id: loop
title: <Loop>
crumb: "API"
---

import {
  LoopExamples,
  BlueSquare,
} from "../components/LoopExamples/LoopExamples";

```twoslash include example
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
```

_available from v2.5.0_

The `<Loop />` component allows you to quickly lay out an animation so it repeats itself.

```tsx twoslash title="MyComp.tsx"
// @include: example-BlueSquare
import { Loop } from "remotion";
// ---cut---
const MyComp = () => {
  return (
    <Loop durationInFrames={50} times={2}>
      <BlueSquare />
    </Loop>
  );
};
```

:::note
Good to know: You can nest loops within each other and they will cascade.
:::

## API

The Loop component is a high order component and accepts, besides it's children, the following props:

### `durationInFrames`

How many frames one iteration of the loop should be long.

### `times`

_optional_

How many times to loop the content. By default it will be `Infinity`.

### `layout`

_optional_

Either `"absolute-fill"` _(default)_ or `"none"`.  
By default, your content will be absolutely positioned.  
If you would like to disable layout side effects, pass `layout="none"`.

### `style`<AvailableFrom v="3.3.4"/>

_optional_

CSS styles to be applied to the container. If `layout` is set to `none`, there is no container and setting this style is not allowed.

## Examples

All the examples below are based on the following animation of a blue square:

<LoopExamples />
<br />

```tsx twoslash
// @include: example-BlueSquare
// ---cut---
const MyComp = () => {
  return <BlueSquare />;
};
```

### Continuous loop

<LoopExamples type="base" />
<br />

```tsx twoslash
// @include: example-BlueSquare
import { Loop } from "remotion";
// ---cut---
const MyComp = () => {
  return (
    <Loop durationInFrames={50}>
      <BlueSquare />
    </Loop>
  );
};
```

### Fixed count loop

<LoopExamples type="times" />
<br />

```tsx twoslash
// @include: example-BlueSquare
import { Loop } from "remotion";
// ---cut---
const MyComp = () => {
  return (
    <Loop durationInFrames={50} times={2}>
      <BlueSquare />
    </Loop>
  );
};
```

### Nested loop

<LoopExamples type="nested" />
<br />

```tsx twoslash
// @include: example-BlueSquare
import { Loop } from "remotion";
// ---cut---
const MyComp = () => {
  return (
    <Loop durationInFrames={75}>
      <Loop durationInFrames={30}>
        <BlueSquare />
      </Loop>
    </Loop>
  );
};
```

## `useLoop()`<AvailableFrom v="4.0.142" />

A child component can use the `Loop.useLoop()` hook to get information about the current loop.  
You should check for `null`, which is the case if the component is not inside a loop.

If inside a loop, an object with two properties is returned:

- `durationInFrames`: The duration of the loop in frames as passed to the `<Loop />` component.
- `iteration`: The current iteration of the loop, starting at 0.

```tsx twoslash
import React from "react";
import { Loop, useCurrentFrame } from "remotion";

const LoopedVideo: React.FC = () => {
  return (
    <Loop durationInFrames={50} times={3} name="MyLoop">
      <Child />
    </Loop>
  );
};

const Child = () => {
  const frame = useCurrentFrame(); // 75
  const loop = Loop.useLoop();

  if (loop === null) {
    // Not inside a loop
  } else {
    console.log(loop.durationInFrames); // 50
    console.log(loop.iteration); // 1
  }

  return <div>{frame}</div>;
};
```

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/loop/index.tsx)
- [`<Sequence>`](/docs/sequence)
